<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- SEO：搜索引擎优化，网站优化三大标签 -->
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta
      name="Keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
    />
    <meta
      name="description"
      content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./fontawesome/css/all.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="icon" href="./img/favicon.ico" />
    <script type="text/javascript" src="./js/tools.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
  </head>
  <body>
    <!-- 顶部导航条 -->
    <div class="topbar-wrapper">
      <div class="topbar w clearfix">
        <!-- 左侧位置菜单 -->
        <div class="location">
          <div class="city">
            <i class="fas fa-map-marker-alt"></i>
            <a href="#">山西</a>
          </div>
          <!-- 添加一个位置的弹出层 -->
          <div class="city-location">
            <ul>
              <a href="javascript:;">北京</a>
              <a href="javascript:;">上海</a>
              <a href="javascript:;">天津</a>
              <a href="javascript:;">重庆</a>
              <a href="javascript:;">河北</a>
              <a class="shanxi" href="javascript:;">山西</a>
              <a href="javascript:;">河南</a>
              <a href="javascript:;">辽宁</a>
              <a href="javascript:;">吉林</a>
              <a href="javascript:;">黑龙江</a>
              <a href="javascript:;">内蒙古</a>
              <a href="javascript:;">江苏</a>
              <a href="javascript:;">山东</a>
              <a href="javascript:;">安徽</a>
              <a href="javascript:;">浙江</a>
              <a href="javascript:;">福建</a>
              <a href="javascript:;">湖北</a>
              <a href="javascript:;">广东</a>
              <a href="javascript:;">广西</a>
              <a href="javascript:;">江西</a>
              <a href="javascript:;">四川</a>
              <a href="javascript:;">海南</a>
              <a href="javascript:;">贵州</a>
              <a href="javascript:;">云南</a>
              <a href="javascript:;">西藏</a>
              <a href="javascript:;">陕西</a>
              <a href="javascript:;">青海</a>
              <a href="javascript:;">宁夏</a>
              <a href="javascript:;">新疆</a>
              <a href="javascript:;">港澳</a>
              <a href="javascript:;">钓鱼岛</a>
              <a href="javascript:;">海外</a>
              <a href="javascript:;">台湾</a>
              <a href="javascript:;">台湾</a>
              <a href="javascript:;">台湾</a>
            </ul>
          </div>
        </div>
        <!-- 右侧菜单 -->
        <ul class="shortcut">
          <li>
            <a href="#">你好，请登录</a>
            <a class="zi" href="#">免费注册</a>
          </li>
          <li class="line"></li>
          <li>
            <a href="#">我的订单</a>
          </li>
          <li class="line"></li>
          <li class="my-jd">
            <div class="my">
              <a herf="#">我的京东</a>
              <i class="fas fa-angle-down"></i>
            </div>
            <!-- 添加一个我的京东的弹出层 -->
            <div class="my-list"></div>
          </li>
          <li class="line"></li>
          <li>
            <a herf="#">京东会员</a>
          </li>
          <li class="line"></li>
          <li class="firm-cg">
            <div class="firm">
              <a class="zi" herf="#">企业采购</a>
              <i class="fas fa-angle-down"></i>
            </div>
            <!-- 添加一个企业采购的弹出层 -->
            <div class="firm-list"></div>
          </li>
          <li class="line"></li>
          <li class="server-kh">
            <div class="server">
              <span>客户服务</span>
              <i class="fas fa-angle-down"></i>
            </div>
            <!-- 添加一个客户服务的弹出层 -->
            <div class="server-list"></div>
          </li>
          <li class="line"></li>
          <li class="web-dh">
            <div class="web">
              <span>网站导航</span>
              <i class="fas fa-angle-down"></i>
            </div>
            <!-- 添加一个网站导航的弹出层 -->
            <div class="web-list"></div>
          </li>
          <li class="line"></li>
          <li>
            <span>手机京东</span>
            <i class="fas fa-angle-down"></i>
            <!-- 添加一个二维码 -->
            <div class="qrcode">
              <img src="./img/京东.webp" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 头部外部容器 -->
    <div class="header-wrapper">
      <div class="header w clearfix">
        <!-- 创建京东logo -->
        <ul class="logo">
          <li>
            <a href="#"><img src="./img/京东.png" /></a>
          </li>
        </ul>
        <!-- 创建搜索框 -->
        <div class="search-wrapper">
          <form class="search" action="#">
            <input class="search-inp" type="text" />
            <span><i class="fas fa-camera"></i></span>
            <button class="search-btn" type="text">
              <i class="fas fa-search"></i>
            </button>
          </form>
        </div>
        <!-- 创建购物车 -->
        <div class="shop-cart">
          <div class="shop">
            <i class="fas fa-shopping-cart"></i>
            <a class="gouwu" href="#">我的购物车</a>
          </div>
        </div>
        <!-- 创建搜索框下热词 -->
        <div class="hotwords">
          <a class="id" href="#">拉杆箱背包</a>
          <a href="#">沃尔玛</a>
          <a href="#">食品饮料</a>
          <a href="#">路由器</a>
          <a href="#">格力空调</a>
          <a href="#">中兴屏下</a>
          <a href="#">安踏宠粉</a>
          <a href="#">茶酒特惠</a>
          <a href="#">家装节</a>
        </div>
        <!-- 创建总导航 -->
        <div class="nav">
          <a class="id" href="#">秒杀</a>
          <a class="id" href="#">优惠券</a>
          <a href="#">PLUS会员</a>
          <a href="#">品牌闪购</a>
          <a href="#">拍卖</a>
          <a href="#">京东家电</a>
          <a href="#">京东超市</a>
          <a href="#">京东生鲜</a>
          <a href="#">京东国际</a>
          <a href="#">京东云</a>
        </div>
      </div>
    </div>
    <!-- 创建banner容器 -->
    <div class="banner-wrapper">
      <div class="banner w clearfix">
        <!-- 创建左侧导航条 -->
        <nav class="left-nav">
          <div class="item">
            <a href="#">家用电器</a>
          </div>
          <div class="item">
            <a
              href="file:///D:/%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81/%E4%B9%94/%E5%8D%9A%E5%AD%A6%E8%B0%B7%E7%BD%91%E7%AB%99/index.html"
              >手机</a
            >
            <span class="line">/</span>
            <a href="#">运营商</a>
            <span class="line">/</span>
            <a href="#">数码</a>
          </div>
          <div class="item">
            <a href="#">电脑</a>
            <span class="line">/</span>
            <a href="#">办公</a>
          </div>
          <div class="item">
            <a href="#">家居</a>
            <span class="line">/</span>
            <a href="#">家具</a>
            <span class="line">/</span>
            <a href="#">家装</a>
            <span class="line">/</span>
            <a href="#">厨具</a>
          </div>
          <div class="item">
            <a href="#">男装</a>
            <span class="line">/</span>
            <a href="#">女装</a>
            <span class="line">/</span>
            <a href="#">童装</a>
            <span class="line">/</span>
            <a href="#">内衣</a>
          </div>
          <div class="item">
            <a href="#">美妆</a>
            <span class="line">/</span>
            <a href="#">个护清洁</a>
            <span class="line">/</span>
            <a href="#">宠物</a>
          </div>
          <div class="item">
            <a href="#">女鞋</a>
            <span class="line">/</span>
            <a href="#">箱包</a>
            <span class="line">/</span>
            <a href="#">钟表</a>
            <span class="line">/</span>
            <a href="#">珠宝</a>
          </div>
          <div class="item">
            <a href="#">男鞋</a>
            <span class="line">/</span>
            <a href="#">运动</a>
            <span class="line">/</span>
            <a href="#">户外</a>
          </div>
          <div class="item">
            <a href="#">房产</a>
            <span class="line">/</span>
            <a href="#">汽车</a>
            <span class="line">/</span>
            <a href="#">汽车用品</a>
          </div>
          <div class="item">
            <a href="#">母婴</a>
            <span class="line">/</span>
            <a href="#">玩具乐器</a>
          </div>
          <div class="item">
            <a href="#">食品</a>
            <span class="line">/</span>
            <a href="#">酒类</a>
            <span class="line">/</span>
            <a href="#">生鲜</a>
            <span class="line">/</span>
            <a href="#">特产</a>
          </div>
          <div class="item">
            <a href="#">艺术</a>
            <span class="line">/</span>
            <a href="#">礼品鲜花</a>
            <span class="line">/</span>
            <a href="#">农资绿植</a>
          </div>
          <div class="item">
            <a href="#">医疗保健</a>
            <span class="line">/</span>
            <a href="#">计生情趣</a>
          </div>
          <div class="item">
            <a href="#">图书</a>
            <span class="line">/</span>
            <a href="#">文娱</a>
            <span class="line">/</span>
            <a href="#">教育</a>
            <span class="line">/</span>
            <a href="#">电子书</a>
          </div>
          <div class="item">
            <a href="#">机票</a>
            <span class="line">/</span>
            <a href="#">酒店</a>
            <span class="line">/</span>
            <a href="#">旅游</a>
            <span class="line">/</span>
            <a href="#">生活</a>
          </div>
          <div class="item">
            <a href="#">理财</a>
            <span class="line">/</span>
            <a href="#">众筹</a>
            <span class="line">/</span>
            <a href="#">白条</a>
            <span class="line">/</span>
            <a href="#">保险</a>
          </div>
          <div class="item">
            <a href="#">安装</a>
            <span class="line">/</span>
            <a href="#">维修</a>
            <span class="line">/</span>
            <a href="#">清洗</a>
            <span class="line">/</span>
            <a href="#">二手</a>
          </div>
          <div class="item">
            <a href="#">工业品</a>
          </div>
        </nav>
        <!-- 创建中间轮播图 -->
        <div id="outer">
          <!-- 添加轮播图左箭头 -->
          <button id="prev">
            <i class="fas fa-angle-left"></i>
          </button>
          <ul id="imgList">
            <li>
              <a href="#"><img src="./img/01.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/02.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/03.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/04.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/05.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/06.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/07.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/08.jpg" alt="" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/01.jpg" alt="" /></a>
            </li>
          </ul>
          <!-- 添加轮播图右箭头 -->
          <button id="next">
            <i class="fas fa-angle-right"></i>
          </button>
          <!-- 添加导航点 -->
          <div id="navDiv">
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
            <a class="navs" href="javascript:;"></a>
          </div>
          <!-- 添加轮播图箭头
                <div class="prev-next">
                    <a class="prev" href="#"></a>
                    <a class="next" href="#"></a>
                </div> -->
        </div>
        <!-- 创建小图片 -->
        <div class="picture">
          <!-- 添加小图片左箭头 -->
          <button class="prevs">
            <i class="fas fa-angle-left"></i>
          </button>
          <ul class="imgs-list">
            <li>
              <a href="#"><img src="./img/1.png" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/2.png" /></a>
            </li>
            <li>
              <a href="#"><img src="./img/3.png" /></a>
            </li>
          </ul>
          <!-- 添加小图片箭头
                <div class="prevs-nexts">
                    <a class="prevs" href="#"></a>
                    <a class="nex ts" href="#"></a>
                </div> -->
          <!-- 添加小图片右箭头 -->
          <button class="nexts">
            <i class="fas fa-angle-right"></i>
          </button>
        </div>
        <!-- 创建最右侧菜单 -->
        <div class="user-wrapper">
          <!-- 最上边用户登录容器 -->
          <div class="user">
            <a href="#"><img src="./img/dog.png" /></a>
            <a class="hi" href="#">Hi~欢迎逛京东！</a>
            <a class="use" href="#">登录</a>
            <span class="line">|</span>
            <a class="us" href="#">注册</a>
            <a class="new" href="#">新人福利</a>
            <a class="plus" href="#">PLUS会员</a>
          </div>
          <!-- 中间京东快报容器 -->
          <div class="news">
            <span>京东快报</span>
            <a class="more" href="#"
              >更多
              <i class="fas fa-angle-right"></i>
            </a>
            <ul class="news-list">
              <li>
                <a class="title" href="#">热门</a>
                <a class="new" href="#">大屏全能型办公本，...</a>
              </li>
              <li>
                <a class="title" href="#">热门</a>
                <a class="new" href="#">备上六神宝宝植物精...</a>
              </li>
              <li>
                <a class="title" href="#">最新</a>
                <a class="new" href="#">用途广泛的小苏打，...</a>
              </li>
              <li>
                <a class="title" href="#">热评</a>
                <a class="new" href="#">金河田魔术师机箱，...</a>
              </li>
            </ul>
          </div>
          <!-- 创建右下角图标容器 -->
          <div class="menu">
            <ul class="menu-list">
              <li>
                <a class="blue" href="#">
                  <i class="fas fa-mobile-alt"></i> 话费
                </a>
              </li>
              <li>
                <a class="orange" href="#">
                  <i class="fas fa-plane"></i> 机票
                </a>
              </li>
              <li>
                <a class="green" href="#">
                  <i class="fas fa-hotel"></i> 酒店
                </a>
              </li>
              <li>
                <a class="orange" href="#">
                  <i class="fas fa-gamepad"></i> 游戏
                </a>
              </li>
              <li>
                <a class="green" href="#">
                  <i class="fas fa-fire"></i> 加油卡
                </a>
              </li>
              <li>
                <a class="red" href="#">
                  <i class="fas fa-train"></i> 火车票
                </a>
              </li>
              <li>
                <a class="green" href="#">
                  <i class="fas fa-user-alt"></i> 众筹
                </a>
              </li>
              <li>
                <a class="blue" href="#">
                  <i class="fas fa-donate"></i> 理财
                </a>
              </li>
              <li>
                <a class="red" href="#"> <i class="fas fa-file"></i> 白条 </a>
              </li>
              <li>
                <a class="red" href="#"> <i class="fas fa-film"></i> 电影票 </a>
              </li>
              <li>
                <a class="blue" href="#">
                  <i class="fas fa-suitcase"></i> 企业购
                </a>
              </li>
              <li>
                <a class="orange" href="#">
                  <i class="fas fa-wallet"></i> 礼品卡
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 创建广告容器 -->
        <div class="ad-wrapper">
          <!-- 创建左侧京东秒杀 -->
          <div class="jdms-wrapper">
            <a href="javascript:;" class="bac">
              <img src="./img/jdms.png" alt="" />
            </a>
            <a href="javascript:;" class="content">
              <div class="jdms">京东秒杀</div>
              <div class="dc-wrapper">
                <span class="dct">16:00</span
                ><span class="dc">点场 距结束</span>
              </div>
              <ul class="djs">
                <li class="black">
                  <div id="time1"></div>
                </li>
                <li class="mh">:</li>
                <li class="black">
                  <div id="time2"></div>
                </li>
                <li class="mh">:</li>
                <li class="black">
                  <div id="time3"></div>
                </li>
              </ul>
            </a>
          </div>
          <!-- 创建中间广告 -->
          <ul class="ad">
            <li>
              <a href="javascript:;">
                <img src="./img/ad1.webp" alt="" />
                <span class="name"
                  >喜钻
                  白18K金钻戒女/结婚钻石女戒/订婚求婚钻石戒指/单钻经典6爪裸钻纪念日礼物
                  30分FG色SI-现货闪发</span
                >
                <span class="jg">¥3720.00</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/ad2.webp" alt="" />
                <span class="name"
                  >贝尔金（Belkin）type-c七合一扩展坞转换器iPadPro iPad mini
                  苹果Macbook7口华硕联想笔记本扩展器扩展坞</span
                >
                <span class="jg">¥359.10</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/ad3.webp" alt="" />
                <span class="name"
                  >蛇圣（Holy serpent）
                  F2蓝牙耳机入耳式双耳无线运动跑步挂脖式适用于苹果华为小米手机通用
                  炫酷黑2021纳米升级款</span
                >
                <span class="jg">¥68.90</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/ad4.webp" alt="" />
                <span class="name"
                  >Redmi Note 9 4G 6000mAh大电池 骁龙662处理器 18W快充 烟波蓝
                  8GB+128GB 智能手机 小米 红米</span
                >
                <span class="jg">¥1169.00</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="./img/ad5.webp" alt="" />
                <span class="name">微软（Microsoft）日版 Xbox Series S</span>
                <span class="jg">¥2399.00</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- 创建固定工具 -->
        <div class="tool-wrapper">
          <ul class="tool">
            <li>
              <a href="javascript:;">京东秒杀</a>
            </li>
            <li>
              <a href="javascript:;">特色优选</a>
            </li>
            <li>
              <a href="javascript:;">频道广场</a>
            </li>
            <li>
              <a href="javascript:;">为你推荐</a>
            </li>
            <li>
              <i class="fab fa-waze"></i>
              <a href="javascript:;">客服</a>
            </li>
            <li>
              <i class="fa fa-pencil-alt"></i>
              <a href="javascript:;">反馈</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
